<template>
  <el-card class="box-card">
    <div class="card-header">
      <h3>充电详情</h3>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div>终端编号: {{ details.pileCode || '加载中...' }}</div>
        <div>充电功率: {{ details.pilePower || '加载中...' }} kW</div>
        <div>订单编号: {{ details.orderNumber || '暂无' }}</div>
        <div>开始时间: {{ details.createTime || '暂无' }}</div>
      </el-col>
      <el-col :span="12">
        <div>当前电量: {{ details.electricityQuantity || 0 }} kWh</div>
        <div>预计费用: ¥ {{ details.amount || 0 }}</div>
        <div>充电百分比: {{ details.percentage || 0 }}%</div>
        <div>预计剩余时间: {{ details.remainingTime || '暂无' }} 小时</div>
      </el-col>
    </el-row>
    <div class="button-group">
      <el-button
          v-if="!isCharging"
          type="primary"
          size="large"
          :loading="isLoading"
          @click="startCharging"
      >
        开始充电
      </el-button>
      <el-button
          v-else
          type="danger"
          size="large"
          :loading="isLoading"
          @click="stopCharging"
      >
        停止充电
      </el-button>
    </div>
  </el-card>
</template>

---

### 脚本部分

```javascript
<script>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import { useRoute } from 'vue-router';


export default {
  name: "chargingpileDetail",
  setup() {
    const route = useRoute();
    const pileId = route.params.pileId;
    const stationId = route.params.stationId;


    // 数据
    const details = ref({
      pileCode: "", // 终端编号
      pilePower: 0, // 充电功率
      orderNumber: "",
      createTime: "",
      electricityQuantity: 0,
      amount: 0,
      remainingTime: 0,
      percentage: 0,
    });


    const isCharging = ref(false); // 是否正在充电
    const isLoading = ref(false); // 是否加载中
    const intervalId = ref(null); // 定时器 ID

    // 获取充电桩详情
    const fetchPileDetails = async () => {
      try {
        const response = await axios.get(`/charging/pile/${pileId}`); // 使用路径参数
        details.value.pileCode = response.data.pileCode;
        details.value.pilePower = response.data.pilePower;
      } catch (error) {
        ElMessage.error("获取充电桩详情失败，请稍后重试");
      }
    };

    // 获取充电详情
    const fetchDetails = async (orderNumber) => {
      try {
        const response = await axios.get(`/charging/details/${orderNumber}`);
        details.value = response.data;
      } catch (error) {
        ElMessage.error("刷新充电详情失败");
      }
    };

    // 开始充电
    const startCharging = async () => {
      try {
        isLoading.value = true;

        // 从 localStorage 获取 customerId
        const user = JSON.parse(localStorage.getItem("user")); // 假设用户信息保存在 localStorage 中的 "user" 键下
        if (!user || !user.id) {
          ElMessage.error("用户未登录或无效，请重新登录");
          return;
        }

        const customerId = user.id;

        const payload = {
          customerId: customerId,
          pileId: pileId,
          stationId: stationId,
        };

        const response = await axios.post("/charging/start", payload);
        details.value.orderNumber = response.data.order_number;
        details.value.createTime = new Date().toLocaleString();
        isCharging.value = true;

        // 启动定时刷新
        startRefreshing(details.value.orderNumber);

        ElMessage.success("充电已启动");
      } catch (error) {
        ElMessage.error("启动充电失败，请稍后重试");
      } finally {
        isLoading.value = false;
      }
    };


    // 停止充电
    const stopCharging = async () => {
      try {
        isLoading.value = true;
        await axios.post(`/charging/stop/${details.value.orderNumber}`);
        isCharging.value = false;

        // 停止定时刷新
        stopRefreshing();

        ElMessage.success("充电已停止");
      } catch (error) {
        ElMessage.error("停止充电失败，请稍后重试");
      } finally {
        isLoading.value = false;
      }
    };

    // 开始定时刷新充电详情
    const startRefreshing = (orderNumber) => {
      stopRefreshing(); // 避免重复定时
      fetchDetails(orderNumber); // 立即刷新一次
      intervalId.value = setInterval(() => {
        fetchDetails(orderNumber);
      }, 5000);
    };

    // 停止定时刷新
    const stopRefreshing = () => {
      if (intervalId.value) {
        clearInterval(intervalId.value);
        intervalId.value = null;
      }
    };

    // 页面加载时初始化
    onMounted(() => {
      fetchPileDetails();
    });

    // 页面卸载时清除定时器
    onBeforeUnmount(() => {
      stopRefreshing();
    });

    return {
      details,
      isCharging,
      isLoading,
      startCharging,
      stopCharging,
    };
  },
};
</script>
<style scoped>
.box-card {
  margin: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.button-group {
  margin-top: 20px;
  text-align: center;
}

.start-button,
.stop-button {
  width: 100%;
}

.stop-button {
  background-color: red;
  color: white;
}
</style>



